<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			table{
				width: 500px;
				border: 1px solid black;
				margin: 0 auto;
				border-collapse: collapse;
				text-align: center;
			}
			td,th{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th><input type="checkbox" id="selectAllId"/></th>
				<th>序号</th>
				<th>名称</th>
				<th>价格</th>
				<th>数量</th>
				<th>删除</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="goods"/></td>
				<td>1</td>
				<td>htc</td>
				<td>3200</td>
				<td>110</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="goods"/></td>
				<td>1</td>
				<td>apple</td>
				<td>3200</td>
				<td>110</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="goods"/></td>
				<td>1</td>
				<td>nokia</td>
				<td>3200</td>
				<td>110</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="goods"/></td>
				<td>1</td>
				<td>samsung</td>
				<td>3200</td>
				<td>110</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="goods"/></td>
				<td>1</td>
				<td>heimei</td>
				<td>3200</td>
				<td>110</td>
				<td><a href="#">删除</a></td>
			</tr>
		</table>
	</body>
	
	<script src="../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$("tr:first").css("background-color", "yellow");
			//$("tr:even:gt(0)").css("background-color", "green");
			//$("tr:even:not(:first)").css("background-color", "green");
			$("tr:gt(0):odd").css("background-color", "green");
			
			// change事件是监听checkbox选中和未选中状态
			$("#selectAllId").change(function() {
				$(".goods").each(function() {
					var flag = $("#selectAllId").prop("checked");
					$(this).prop("checked", flag);
				});
			});
			
			/* $("#selectAllId").on("change", function() {
				$(".goods").each(function() {
					var flag = $("#selectAllId").prop("checked");
					$(this).prop("checked", flag);
				});
			}); */
		});
	</script>
</html>
